
import React, { Component } from 'react';
import Son from './Son';

export default class index extends Component {

    constructor(props){
        super(props);
        this.userid =null;
        // 3.1：创建一个ref对象
        this.refUserPass = React.createRef();

        // 
        this.refSon02 = null;
        this.refSon03 = React.createRef();

    }


    changeUsername=()=>{
        this.refs.username.value="hehe";
    }

    testf02=()=>{
        this.userid.value = "hello";
    }

    testf03=()=>{
        // 3.3：获取dom：ref对象的current属性。
        this.refUserPass.current.type="button";
        this.refUserPass.current.value="文本框被改成按钮了";
    }

    ComTestf01=()=>{
        this.refs.refSon.sonFn("给儿子");
    }

    ComTestf02=()=>{
        this.refSon02.sonFn("再给儿子");
    }

    ComTestf03=()=>{
        this.refSon03.current.sonFn("再再给儿子");
    }

  render() {
    return (
      <div>
        <h1>refs111</h1>
        {/* 1、给refs属性赋值为字符串 */}

        <input type="text" ref="username" />
        <input type="button" value="测试" onClick={this.changeUsername} />
        <hr/>
        <Son ref="refSon"></Son>
        <input type="button" value="自定义组件测试" onClick={this.ComTestf01} />
        <hr/>
        {/* 2、给ref属性赋值回调函数 */}
        <input type="text" ref={(el)=>{this.userid = el  }} />
        <input type="button" value="测试02" onClick={this.testf02} />
        <hr/>
        <Son ref={el=>this.refSon02 = el}></Son>
        <input type="button" value="自定义组件测试02" onClick={this.ComTestf02} />
        <hr/>
      
        {/* 3、
            3.2：把ref对象和dom元素关联起来。
        */}
        <input type="text" ref={this.refUserPass} />
        <input type="button" value="测试03" onClick={this.testf03} />
        <hr/>
        
        <Son ref={this.refSon03}></Son>

        <input type="button" value="自定义组件测试03" onClick={this.ComTestf03} />
        <hr/>

      </div>
    )
  }
}
